<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kafka Messages</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .message-container { margin-top: 20px; }
        .message-field { margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>Kafka Messages</h1>
    <div id="messages">
        {% for message in consumerList %}
            <div class="message-container">
                <div class="message-field"><strong>ID:</strong> {{ message.id }}</div>
                <div class="message-field"><strong>Name:</strong> {{ message.name }}</div>
                <div class="message-field"><strong>Data:</strong> {{ message.data }}</div>
                <div class="message-field"><strong>Version:</strong> {{ message.version }}</div>
            </div>
        {% endfor %}
    </div>
</body>
</html>